<template>
  <div>
    <div v-if="!repoUrl">loading</div>
    <div v-else>most star repo is <a :href="repoUrl">{{repoName}}</a></div>
  </div>
</template>


<script>
  //引入axios
  import axios from 'axios'

    export default {
      data () {
        return {
          repoUrl: '',
          repoName: ''
        }
      },

      mounted() { //执行异步代码
        // 发ajax 请求获取数据
        const url = `https://api.github.com/search/repositories?q=v&sort=stars`;  //有效
        //vue1.x，vue-resource
        /*this.$http.get(url).then(
          response => {
            //成功了
            const result = response.data;
            // 得到最受欢迎的repo
            const mostRepo = result.items[0];
            this.repoUrl = mostRepo.html_url;
            this.repoName = mostRepo.name;

          },
          reason => {
            // 请求失败
            alert('失败');
          }

        );*/

        //使用axios发送ajax请求,vue2.x
        axios.get(url).then(
          response => {
            //成功了
            const result = response.data;
            // 得到最受欢迎的repo
            const mostRepo = result.items[0];
            this.repoUrl = mostRepo.html_url;
            this.repoName = mostRepo.name;
          }).catch(
          error => {
            alert('请求失败');
          }
        )
      }
    }
</script>

<style scoped>

</style>
